<template>
  <div>
    <div class="box" v-if="a">
      <div class="goodsList">
        <div>
          <span>购物车</span>
          <a 
          @click="clearCart"
          >清空</a>
        </div>
        <ul>
          <li v-for="(item, index) in foodList" :key="index">
            <span>{{item.name}}</span>
            <span class="btn-box">
              <i class="iconfont icon-jianhao" @click="add(item.name,item.idx,0)"></i>
              <span>{{item.count}}</span>
              <i class="iconfont icon-jiahao-tianchong" @click="add(item.name,item.idx,1)"></i>
            </span>
            <span>
              <span>￥</span>
              <span>{{item.price}}</span>
            </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="box-footer">
      <div class="price" >
        <div class="all-Lists">{{foodsNum}}</div>
        <div class="shopping-cart">
          <i class="el-icon-shopping-cart-1"></i>
        </div>

        <div class="shopping-cart-price" @click="b">
          <span class="all-price">￥{{foodPrice}}</span>
          <span class="ps-price">另需配送费￥4元</span>
        </div>

        <div class="btn">
          <span v-if="(20-foodPrice)>0" class="g-price">还差￥{{20-foodPrice}}起送</span>
          <span v-else class="g-price active">去结算</span>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "shoppingCart",
  data() {
    return {
      a: false,
    };
  },
  methods: {
    clearCart(){
      this.$store.commit('clearCart')
    },
    add(foodsnum,index,a) {
      this.$store.commit('foodsnum', {foodsnum,index,a})
    },
    b() {
      this.a = !this.a;
    },
  },
  computed: {
    ...mapGetters(['foodList','foodsNum','foodPrice']),
  },
  components: {},
};
</script>
<style lang="less" scoped>
.box {
  background-color: rgba(7, 17, 27, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .goodsList {
    position: absolute;
    right: 0;
    bottom: 81px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    & > :nth-child(1) {
      box-sizing: border-box;
      height: 80px;
      width: 100%;
      background-color: #f3f5f7;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 36px;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    }
    ul {
      max-height: 480px;
      overflow: scroll;
      padding: 0 36px;
      li {
        height: 96px;
        padding: 24px 0;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
        & > :nth-child(1) {
          font-size: 28px;
          line-height: 96px;
          color: rgb(7, 17, 27);
        }
        & > :nth-child(2) {
          line-height: 96px;
          float: right;
          i {
            font-size: 48px;
            color: rgb(0, 160, 220);
            vertical-align: middle;
          }
          span {
            display: inline-block;
            width: 48px;
            text-align: center;
            font-size: 20px;
            color: rgb(147, 153, 159);
          }
        }
        & > :nth-child(3) {
          float: right;
          margin-right: 24px;
          & > :nth-child(1) {
            font-size: 20px;
            line-height: 96px;
            color: rgb(240, 20, 20);
            font-weight: 700;
          }
          & > :nth-child(2) {
            font-size: 28px;
            line-height: 96px;
            color: rgb(240, 20, 20);
            font-weight: 700;
          }
        }
      }
    }
  }
}

.box-footer {
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 0;
  .price {
    display: flex;
    height: 100%;
    background-color: #141d27;
    .all-Lists {
      background-color: red;
      width: 48px;
      height: 36px;
      border-radius: 24px;
      text-align: center;
      line-height: 36px;
      position: absolute;
      left: 100px;
      top: -36px;
      z-index: 99999;
      font-size: 18px;
      font-weight: 700;
      color: rgba(255, 255, 255);
    }
    .shopping-cart {
      box-sizing: border-box;
      position: relative;
      top: -40px;
      left: 24px;
      width: 116px;
      height: 116px;
      background-color: rgb(0, 160, 220);
      border-radius: 50%;
      border: 12px solid #141d27;
      i {
        margin: 20px;
        display: inline-block;
        font-size: 48px;
        color: rgb(255, 255, 255);
      }
    }
    .shopping-cart-price {
      height: 100%;
      margin-left: 36px;
      .all-price {
        display: inline-block;
        font-size: 32px;
        color: rgb(255, 255, 255);
        font-weight: 700;
        line-height: 48px;
        padding-right: 24px;
        margin: 16px 0;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
      }
      .ps-price {
        display: inline-block;
        padding-left: 24px;
        font-size: 24px;
        font-weight: 700;
        line-height: 48px;
        margin: 16px 0;
        color: rgba(255, 255, 255, 0.4);
      }
    }
    .btn {
      position: absolute;
      right: 0px;
      bottom: 0px;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.4);
      z-index: 999;
      .g-price {
        display: inline-block;
        padding-left: 24px;
        text-align: center;
        font-size: 32px;
        line-height: 80px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.4);
        padding-right: 36px;
        &.active{
          background-color:green;
        }
      }
    }
  }
}
</style>